<template>
  <el-drawer
    v-model="drawer2"
    :direction="direction"
    :width="120"
    :before-close="handleClose"
  >
    <template #header>
      <h4 style="font-size: 16px; font-weight: 600;">编辑新闻</h4>
    </template>
    <template #default>
      <div class="drawer-content">
        <div class="left-panel">
          <!-- 新闻标题 -->
          <div class="form-item">
            <label class="required">新闻标题</label>
            <el-input
              v-model="newsForm.title"
              placeholder="请输入新闻标题"
              style="width: 100%"
            ></el-input>
          </div>

          <!-- 新闻标签 -->
          <div class="form-item">
            <label class="required">新闻标签</label>
            <el-select
              v-model="newsForm.tag"
              placeholder="请选择新闻标签"
              style="width: 100%"
            >
              <el-option label="宏观形势" value="1"></el-option>
              <el-option label="行业动态" value="2"></el-option>
              <el-option label="产业链动态" value="3"></el-option>
              <el-option label="国际能源观察" value="4"></el-option>
              <el-option label="其他" value="5"></el-option>
            </el-select>
          </div>

          <!-- 新闻来源 -->
          <div class="form-item">
            <label>新闻来源</label>
            <el-input
              v-model="newsForm.source"
              placeholder="请输入新闻来源"
              style="width: 100%"
            ></el-input>
          </div>

          <!-- 新闻网址 -->
          <div class="form-item">
            <label>新闻网址</label>
            <el-input
              v-model="newsForm.url"
              placeholder="请输入新闻网址"
              style="width: 100%"
            ></el-input>
          </div>

          <!-- 新闻摘要 -->
          <div class="form-item">
            <label class="required">新闻摘要</label>
            <el-input
              v-model="newsForm.summary"
              type="textarea"
              :rows="4"
              placeholder="请输入新闻摘要"
              style="width: 100%"
            ></el-input>
            <div class="tips">建议200字以内</div>
          </div>
        </div>

        <div class="right-panel">
          <div class="content-item">
            <h5>正文内容</h5>
            <div class="content-text">
              第1条新闻详细内容<br>
              这是第1条新闻的详细内容，包含了丰富的信息和分析。本文档详细介绍了相关事件的背景、发展过程和未来展望。
            </div>
          </div>

          <div class="content-item">
            <h5>主要内容</h5>
            <div class="content-text">
              详细介绍了国际合作的最新进展<br>
              分析了当前医疗进步面临的挑战和机遇<br>
              探讨了城市建设对未来发展的影响
            </div>
          </div>

          <div class="content-item">
            <h5>专家观点</h5>
            <div class="content-text">
              行业专家表示，这一发展将为国际合作领域带来新的变革，促进相关产业的升级和创新。
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

const newsTypeMap = {
  1: '宏观形势',
  2: '行业动态',
  3: '产业链动态',
  4: '国际能源观察',
  5: '其他'
}

// 获取新闻类型显示文本
const getNewsTypeText = (type) => {
  return newsTypeMap[type] || type
}
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'save'])
const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')

const newsForm = ref({
  title: '',
  tag: '',
  source: '',
  url: '',
  summary: ''
})

// 监听modelValue变化，控制抽屉显示
watch(
  () => props.modelValue,
  (newVal) => {
    drawer2.value = newVal
  },
  { immediate: true }
)

// 监听内部变量变化，通知父组件
watch(
  () => drawer2.value,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

// 监听data变化，更新表单
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      // 确保标签值是字符串类型，与el-select的value匹配
      const tagValue = newData.classReal ? String(newData.classReal) : '';

      newsForm.value = {
        title: newData.newsTitle || '',
        tag: tagValue,
        source: newData.newsSource || '',
        url: newData.newsUrl || '',
        summary: newData.abstractReal || ''
      }
    }
  },
  { immediate: true, deep: true }
)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要取消编辑吗？未保存的内容将丢失')
    .then(() => {
      done()
      drawer2.value = false
    })
    .catch(() => {})
}

const cancelClick = () => {
  ElMessageBox.confirm('确定要取消编辑吗？未保存的内容将丢失')
    .then(() => {
       drawer2.value = false
    })
    .catch(() => {})
}

const confirmClick = () => {
  ElMessageBox.confirm('确定要保存修改吗？')
    .then(() => {
      console.log('保存成功', newsForm.value)
      // 发出save事件，传递表单数据
      emit('save', newsForm.value)
      drawer2.value = false
    })
    .catch(() => {})
}
</script>

<style scoped>

.edit-btn {
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  padding: 0;
  margin-left: 10px;
}

.drawer-content {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  height: calc(100% - 40px);
}

.left-panel {
  flex: 1;
  padding-right: 10px;
  border-right: 1px solid #eee;
}

.right-panel {
  flex: 1;
  padding-left: 10px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: inline-block;
  width: 80px;
  text-align: left;
  margin-bottom: 8px;
  font-size: 14px;
}

.required::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 4px;
}

.tips {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
  text-align: right;
}

.content-item {
  margin-bottom: 25px;
}

.content-item h5 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.content-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  white-space: pre-line;
}
</style>
